<template>
  <div>
   
    <el-card class="body_name">
        <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入查询内容" v-model="searchObj.query"  size="small" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="query()"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
      
  <el-table :data="dataList" borderstyle="width: 100%">
    <el-table-column prop="order_id" label="序号" width="180" ></el-table-column>
    <el-table-column prop="order_number" label="订单编号" width="180"></el-table-column>
    <el-table-column prop="order_price" label="订单价格"></el-table-column>
   <el-table-column label="是否付款">
                <template slot-scope="scope">
                    <el-tag type="danger" v-show="scope.row.order_pay==0">未付款</el-tag>
                    <el-tag  v-show="scope.row.order_pay==1">支付宝支付</el-tag>
                   <el-tag type="success"  v-show="scope.row.order_pay==2">微信支付</el-tag>
                   <el-tag type="warning"  v-show="scope.row.order_pay==3">银行卡支付</el-tag>
                </template>
          </el-table-column>
    <el-table-column prop="is_send" label="是否发货"></el-table-column>
    <el-table-column prop="create_time" label="下单时间">
   <template slot-scope="row">
         {{row.add_time | timeMF}}
       </template>

    </el-table-column>
    <el-table-column  label="操作">
      <template slot-scope="{row}">
      <el-button type="primary" @click="updata(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
   </el-table>
        </el-col>
      </el-row>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchObj.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="searchObj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"      
        >
        </el-pagination>

<el-dialog title="添加分类参数" :visible.sync="dialogFormVisible">
          <el-form>
          
            <el-form-item label="订单价格 " label-width="100px">
              <el-input v-model="fromObj.order_price"></el-input>
            </el-form-item>
            <el-form-item label="是否付款" label-width="100px">
              <el-input v-model="fromObj.order_pay"></el-input>
            </el-form-item>
            <el-form-item label="是否发货" label-width="100px">
              <el-input v-model="fromObj.is_send"></el-input>
            </el-form-item>
          
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </div>
        </el-dialog>


    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      searchObj: {
        query: "",
        pagenum: 1,
        pagesize: 3,
        // user_id:"",
        // pay_status:"",
        // is_send:"",
        // order_fapiao_title:"",
        // order_fapiao_company:"",
        // order_fapiao_content:"",
        // consignee_addr:"",
        // order_number:"",
        // order_price:"",
      },

      fromObj: {
        id: "",
        is_send: "",
        order_pay: "",
        order_price: "",
        order_number: "",
        pay_status: "",
      },
      dataList: [],
      total: 0,
    };
  },
  methods: {
    //渲染
    async query() {
      let rst = await this.$http.get("orders", this.searchObj);
      console.log(rst);
      let { data, mata } = rst;
      this.dataList = data.goods;
      this.total = data.total;
    },
    //编辑值回填
    updata(row) {
      this.dialogFormVisible = true;
      console.log(row);
      this.fromObj.order_price=row.order_price
      this.fromObj.is_send=row.is_send
      this.fromObj.order_pay=row.order_pay
      this.fromObj.order_id=row.order_id
    },
    //修改数据
   async save(){
     let rst=await this.$http.put(`orders/${this.fromObj.order_id}`,this.fromObj)
     console.log(rst);
     this.dialogFormVisible=false
     this.query()
    },

    //分页

    handleSizeChange(val) {
      this.searchObj.pagesize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchObj.pagenum = val;
      this.query();
    },
  },
  mounted() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
</style>